<template>
  <div class="maskCenter">
    <div id="box" :class="visible ? 'systemDialog' : 'systemDialog-hide'" style="height: 700px; width: 950px">
      <div class="dialog-header" v-movew>
        <span>{{ wfName }}&nbsp;&nbsp;-&nbsp;-&nbsp;&nbsp;{{ titleinfo }}</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form ref="form" label-width="75px" :label-position="'left'">
          <el-form-item class="noLabel">
            <el-col :span="24">
              <span>留言信息</span>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="24">
              <el-input class="systemInput" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" v-model="sendInfo.word"
                :resize="'none'"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="2">
              <span>路由选择</span>
            </el-col>
            <el-col :span="22">
              <div v-if="sendtype == -1" class="btndiv" @click="getBackNode">
                {{ btnText }}
              </div>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="8">
              <div class="edge-div">
                <div class="tb-td tb-edge" v-for="(item, index) in edge" :key="index" :class="{
                  'tb-td-active': index == actEdgeIndex,
                  'tb-td-odd': index % 2 == 0,
                }" @click="edgeClick(item, index)">
                  <el-checkbox v-model="item.selected"
                    :disabled="sendInfo.fromNode.routePercent != null ? false : !item.enabled" style="margin-right: 9px"
                    @change="edgeChange($event, index)"></el-checkbox>
                  {{ item.name ? item.name : "" }} —>
                  {{ node[index].name ? node[index].name : "" }}
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="user-div">
                <div class="tb-head">
                  <el-col :span="2">
                    <el-checkbox v-show="actNode.userMulti" @change="allUserChange"
                      v-model="actNode.selectedAll"></el-checkbox>
                  </el-col>
                  <el-col :span="4">姓名</el-col>
                  <el-col :span="14">部门</el-col>
                  <el-col :span="4">账号</el-col>
                </div>
                <div class="tb-td" v-for="(user, index) in actNode.user" :key="index" :class="{
                  'tb-td-active': index == actUserIndex,
                  'tb-td-odd': index % 2 == 0,
                }" @click="userClick(index)">
                  <el-col :span="2">
                    <el-checkbox v-model="user.selected" @change="userChange($event, index)"></el-checkbox>
                  </el-col>
                  <el-tooltip class="item" effect="dark" :content="user.name" placement="top">
                    <el-col :span="4">{{ user.name | ellipsis }}</el-col>
                  </el-tooltip>
                  <el-tooltip effect="dark" placement="top" :content="user.deptName">
                    <el-col :span="14">{{ user.deptName }}</el-col>
                  </el-tooltip>
                  <el-col :span="4">{{ user.account }}</el-col>
                </div>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item class="noLabel">
            <el-col :span="2">
              <el-checkbox v-model="edgeAll" :disabled="!edgeSelectAll" @change="allEdgeChange">全选</el-checkbox>
            </el-col>
            <el-col :span="22">
              <el-checkbox v-model="sendInfo.msg">短信提醒</el-checkbox>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="sendflow">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import { deepCopy } from "@/utils/public";
import {
  wfgetStartTo,
  wfstartTo,
  wfgetSendTo,
  wfsendTo,
  wfgetBackTo,
  wfgetBackFirst,
  wfbackTo,
} from "@/system/api/flowSend";

export default {
  directives: {
    movew,
  },
  name: "flowSend",

  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 4) {
        return value.slice(0, 4) + "...";
      }
      return value;
    },
  },

  props: {
    instNodeId: {
      //实例节点id 必须 启动不需要，启动后必须传
      default: null, //wfId: 50, wfInstId: 8
    },
    sendtype: {
      //流程发送的类型   必须
      default: null, //-1 回退，0 新增，1流转
    },
    var: {
      //参数   必须   启动的时候需要    可以放  表单id  打开表单的vue文件名 this.fvar.push({name:'view',value:'cellView.vue'}); this.fvar.push({name:'wpId',value:this.info.wpId});
      default: null,
    },
    // dataTable: {
    //   //表单关联的表   必须 启动的时候需要
    //   default: null,
    // },
    workTable: {
      //表单关联的表   必须 启动的时候需要
      default: null,
    },
    deptId: {
      //部门id  必须 启动的时候需要
      default: null,
    },
    jhId: {
      //业务驱动id  必须  启动的时候需要
      default: null,
    },
    // dataId: {
    //   //具体数据id， 必须  启动的时候需要
    //   default: null,
    // },
    workId: {
      //具体数据id， 必须  启动的时候需要
      default: null,
    },
    wfClassId: {
      //流程class  必须  启动的时候需要
      default: null,
    },
    title: {
      //模块名  必须   启动的时候需要
      default: null,
    },
    content: {
      //流程内容 必须  启动的时候需要   放 表单的notice   不是表单自己填写
      default: null,
    },
  },
  data() {
    return {
      visible: true,
      wfName: "11111",
      titleinfo: "2222",
      CheckAll: false, //路由是否全部选中
      fromNodesync: false, //路由是否可以多选 fromNode.sync false 只能单选
      nodeuserMulti: false, //node.userMulti 为 true 表示此节点下的人员可以多选，否则单选
      nodeuserSelect: false, //node.userSelect为 true 表示此节点下的人员默认是全选
      noderunType: 4, //node.runType = 2 时，至少要选择一个人员  确定”时选择的节点中必须有一个路由的runType为0、1、2、3
      edgeselected: false, //edge.selected 为 true 表示此路由默认是打钩的
      edgeenabled: false, // 为 true 表示此路由用户可以进行勾选操作，false 标书不能勾选
      mustWord: false, //mustWord = true 时必选填写留言内容
      sendInfo: {},
      user: [],
      edge: [{}],
      node: [{}],
      actEdge: null,
      actEdgeIndex: -1,
      actNode: { userMulti: false, actUser: null, selectedAll: false },
      actUserIndex: -1,
      edgeSelectAll: false,
      toStart: false,
      btnText: "起始节点",
      edgeAll: false,
      routePercent: null,//路由通过率
      isPass: false,//选择的路由是否大于路由通过率
    };
  },
  computed: {},
  mounted() {
    //	console.log("flowSend接收到的deptId");
    //	console.log(this.deptId);
    console.log(this.content);
    this.getFlowInfo();
  },
  methods: {
    hide() {
      this.visible = false;
      this.isPass = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    ok() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("ok", true);
      }, 400);
    },
    edgeClick(item, index) {
      console.log("userSelect：：" + this.node[index].userSelect)
      console.log(JSON.stringify(item), index)
      //路由点击后设置 当前点击路由  路由的索引   当前节点  当前节点用户
      this.actEdge = item;
      this.actEdgeIndex = index;
      if (!item.selected && !item.enabled) {
        //如果路由不可选  并且不可用 那么当节点用户设位空
        this.actNode = { userMulti: false, actUser: null, selectedAll: false };
      } else {
        this.actNode = this.node[index];
        if (this.actNode.userSelect && !this.actNode.userMulti) {
          //默认选择   设置 路由全选按钮 状态
          this.node[this.actEdgeIndex].user.forEach((user, index) => {
            //全选  根据全选的值 设定node下的用户选中状态
            user.selected = true;
          });
        } else if (this.actNode.userSelect && this.actNode.userMulti) {
          //可以多选   默认选择
          this.actNode.selectedAll = true;
          this.node[this.actEdgeIndex].user.forEach((user, index) => {
            //全选  根据全选的值 设定node下的用户选中状态
            user.selected = true;
          });
        } else if (!this.actNode.userSelect && this.actNode.userMulti) {
          //可以多选
          this.node[this.actEdgeIndex].user.forEach((user, index) => {
            //全选  根据全选的值 设定node下的用户选中状态
            user.selected = false;
          });
        }
      }
    },
    initNOde() {
      //初始化node  的  selectedAll   最后要去除   初始化用户checkbox
      this.node.forEach((node, nindex) => {
        this.$set(node, "selectedAll", false);
        node.user.forEach((user, index) => {
          this.$set(user, "selected", false);
        });
      });

      this.setSelectAll(); //设置 路由全选按钮 状态
    },
    setSelectAll() {
      //设置 路由全选按钮 状态   如果存在不可编辑的路由，那么全选按钮不可用
      let enabled = true;
      this.edge.forEach((edge, index) => {
        if (!edge.enabled) {
          enabled = false;
        }
      });
      this.edgeSelectAll = enabled;
      if (this.fromNodesync == null || this.fromNodesync == false) {
        this.edgeSelectAll = false;
      }
    },
    allUserChange(e) {
      //用户全选 按钮 选中  ，那么当前路由下所有的用户选中， 否则不选中
      //this.actEdgeIndex
      this.node[this.actEdgeIndex].user.forEach((user, index) => {
        //全选  根据全选的值 设定node下的用户选中状态
        user.selected = e;
      });

      if (this.edge[this.actEdgeIndex].enabled) {
        //如果当前路由是可以编辑的，那么用户全选了，就要设置选中  用户全部没选那要设置不选
        this.edge[this.actEdgeIndex].selected = e;
      }
    },

    checkAllUserSelected() {
      //用户变更了，那么根据用户选中状态 设置路由 选中状态
      let selectedNum = 0;
      this.actNode.user.forEach((user, index) => {
        if (user.selected) {
          selectedNum = selectedNum + 1;
        }
      });
      if (selectedNum == this.actNode.user.length) {
        //如果 当前节点的 selected 数 等于所有人数 那么 设置 人数全选按钮并 设置路由选中状态
        this.actNode.selectedAll = true;
      } else {
        this.actNode.selectedAll = false; //否者  就是未选中
      }
      if (selectedNum > 0) {
        //只要选中一个用户就要设置 路由选中
        if (this.edge[this.actEdgeIndex].enabled) {
          //如果当前路由是可以编辑的，那么用户全选了，就要设置选中  用户全部没选那要设置不选
          this.edge[this.actEdgeIndex].selected = true;
          this.edgeSelectedAll();
        }
      }

      if (selectedNum == 0) {
        if (this.edge[this.actEdgeIndex].enabled) {
          //如果当前路由是可以编辑的，那么用户全选了，就要设置选中  用户全部没选那要设置不选
          this.edge[this.actEdgeIndex].selected = false;
          this.edgeSelectedAll();
        }
      }
    },
    clearSelectedUser($index) {
      //清空所有用户选中状态 除了 选中的  $index  的用户(用户单选)
      this.actNode.user.forEach((user, index) => {
        if ($index != index) {
          user.selected = false;
        }
      });
    },
    userChange(e, index) {
      //如果当前node  只允许 单选  ，那么当前 用户选中的话，其它所有的用户置为不选中
      if (!this.actNode.userMulti) {
        if (e) {
          this.clearSelectedUser(index);
        }
      }
      if (e) {
        //如果选人了 ，肯定要选路由  ，这个时候要判断路由是否单选
        if (!this.fromNodesync && !this.actNode.userMulti) {
          //路由单选  ，那么清空所有路由及用户
          this.edge.forEach((edge, i) => {
            edge.selected = false;
            this.clearNodeUser(i);
          });
          this.actNode.selected = true;
          this.actNode.user[index].selected = true;
        }
      }
      this.checkAllUserSelected();
    },
    clearNodeUser(index) {
      this.node[index].selectedAll = false;
      this.node[index].user.forEach((user, index) => {
        user.selected = false;
      });
    },
    setNodeUser(index) {
      this.node[index].selectedAll = true;
      this.node[index].user.forEach((user, index) => {
        user.selected = true;
      });
    },
    //根据路由状态  如果路由是未选中的，那么清空该路由下的所有用户
    edgeChange(e, index) {
      console.log("this.edge:::" + JSON.stringify(this.edge))
      //sendInfo.fromNode.routePercent
      if (!this.sendInfo.fromNode.routePercent) {
        if (!this.fromNodesync) {
          //路由单选  ，那么清空所有路由及用户
          this.edge.forEach((edge, i) => {
            edge.selected = false;
            this.clearNodeUser(i);
          });
        }

        if (!e) {
          this.clearNodeUser(index);
        } else {
          this.edge[index].selected = true;
          if (this.node[index].userSelect) {
            //节点用户是否全选
            this.setNodeUser(index);
          }
        }
        this.edgeSelectedAll();
      } else {
        //路由通过率  this.routePercent
        if (!e) {
          this.clearNodeUser(index);
        } else {
          this.edge[index].selected = true;
        }

        let selectedLen = 0;
        let edgeLen = this.edge.length;
        this.edge.forEach(element => {
          if (element.selected) {
            selectedLen++;
          }
        });
        console.log(Number(selectedLen / edgeLen).toFixed(2), this.routePercent, Number(selectedLen / edgeLen).toFixed(2) < this.routePercent)
        if (Number((selectedLen / edgeLen) * 100).toFixed(2) < this.routePercent) {
          //选择路由通过率小于给定的值
          this.isPass = true;
        } else {
          this.isPass = false;
        }
      }

    },
    getBackNode() {
      this.toStart = !this.toStart;
      if (this.toStart) {
        this.wfgetBackFirst();
        this.btnText = "当前节点";
      } else {
        this.wfgetBackTo();
        this.btnText = "起始节点";
      }
    },
    clearAllUser() {
      this.node.forEach((node, nindex) => {
        node.user.forEach((user, uindex) => {
          user.selected = false;
        });
      });
    },
    allEdgeChange(e) {
      //路由全选按钮  点击事件
      if (e) {
        this.edge.forEach((edge, index) => {
          edge.selected = e;
        });
      } else {
        this.edge.forEach((edge, index) => {
          edge.selected = e;
        });
        this.clearAllUser();
      }
    },
    userClick(index) {
      this.actUserIndex = index;
    },
    edgeSelectedAll() {
      //设置 路由全选按钮的  值  是否选中
      if (this.edgeSelectAll) {
        //如果全选按钮可用，那么判断下面的路由是否全部选中
        let $all = true;
        this.edge.forEach((edge, index) => {
          if (!edge.selected) {
            $all = false;
          }
        });
        this.edgeAll = $all;
      }
    },
    getFlowInfo() {
      //获取流程信息    -1 回退，0 新增，1流转
      if (this.sendtype != null) {
        if (this.sendtype == -1) {
          this.wfgetBackTo();
        }
        if (this.sendtype == 0) {
          this.wfgetStartTo();
        }
        if (this.sendtype == 1) {
          this.wfgetSendTo();
        }
      }
    },
    flowSend() {
      if (this.sendtype != null) {
        if (this.sendtype == -1) {
          this.wfbackTo();
        }
        if (this.sendtype == 0) {
          this.wfstartTo();
        }
        if (this.sendtype == 1) {
          this.wfsendTo();
        }
      }
    },
    wfgetStartTo() {
      //获取  流程启动参数
      let param = {};
      this.$set(param, "wfClassId", this.wfClassId);
      console.log(this.deptId)
      this.$set(param, "fromUser", { deptId: this.deptId });
      this.$set(param, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      wfgetStartTo(param).then((res) => {
        if (res.success) {
          this.sendInfo = res.info;
          this.wfName = this.sendInfo.wfName;
          this.titleinfo = this.sendInfo.wfName;
          this.fromNodesync = this.sendInfo.fromNode.sync;
          this.edge = this.sendInfo.edge;
          this.node = this.sendInfo.node;
          //路由通过率
          this.routePercent = this.sendInfo.fromNode.routePercent;
          if (this.routePercent) {
            this.isPass = true;
            this.edge.forEach(element => {
              this.$set(element, 'selected', false);
            });
          } else {
            this.isPass = false;
          }
          this.initNOde();

        } else {
          this.message(res.msg, 3);
        }
      });
    },
    wfstartTo() {
      //需要删除  的信息   表单传递过来
      console.log(this.$store.state.user.info);
      this.$set(this.sendInfo.fromUser, "deptId", this.deptId); //this.$store.state.user.info.deptId
      // this.$set(this.sendInfo, "dataTable", this.dataTable); //'w_user'
      this.$set(this.sendInfo, "workTable", this.workTable); //'w_user'
      this.$set(this.sendInfo, "jhId", this.jhId);
      // this.$set(this.sendInfo, "dataId", this.dataId); //具体数据的id
      this.$set(this.sendInfo, "workId", this.workId); //具体数据的id
      this.$set(this.sendInfo, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      this.$set(this.sendInfo, "title", this.title); //流程名
      this.$set(this.sendInfo, "content", this.content); //流程内容
      wfstartTo(this.sendInfo).then((res) => {
        if (res.success) {
          this.ok();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    wfgetSendTo() {
      let param = { fromNode: {}, fromUser: {} };
      this.$set(param.fromNode, "instNodeId", this.instNodeId);
      this.$set(param.fromUser, "deptId", this.deptId);
      this.$set(param, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      wfgetSendTo(param).then((res) => {
        if (res.success) {
          this.sendInfo = res.info;
          this.wfName = this.sendInfo.wfName;
          this.titleinfo = this.sendInfo.wfName;
          this.fromNodesync = this.sendInfo.fromNode.sync;
          this.edge = this.sendInfo.edge;
          this.node = this.sendInfo.node;
          //路由通过率
          this.routePercent = this.sendInfo.fromNode.routePercent;
          if (this.routePercent) {
            this.isPass = true;
            this.edge.forEach(element => {
              this.$set(element, 'selected', false);
            });
          } else {
            this.isPass = false;
          }
          this.initNOde();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    wfsendTo() {
      this.$set(this.sendInfo, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      this.$set(this.sendInfo, "content", this.content); //流程内容
      wfsendTo(this.sendInfo).then((res) => {
        if (res.success) {
          this.ok();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    wfgetBackTo() {
      let param = { fromNode: {}, fromUser: {} };
      this.$set(param.fromNode, "instNodeId", this.instNodeId);
      this.$set(param, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      wfgetBackTo(param).then((res) => {
        if (res.success) {
          this.sendInfo = res.info;
          this.wfName = this.sendInfo.wfName;
          this.titleinfo = this.sendInfo.wfName;
          this.fromNodesync = this.sendInfo.fromNode.sync;
          this.edge = this.sendInfo.edge;
          this.node = this.sendInfo.node;
          //路由通过率
          this.routePercent = this.sendInfo.fromNode.routePercent;
          if (this.routePercent) {
            this.isPass = true;
            this.edge.forEach(element => {
              this.$set(element, 'selected', false);
            });
          } else {
            this.isPass = false;
          }
          this.initNOde();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    wfgetBackFirst() {
      let param = { fromNode: {}, fromUser: {} };
      this.$set(param.fromNode, "instNodeId", this.instNodeId);
      this.$set(param, "var", this.var); //变量中存放 表单id  和 打开对应表单的vue
      wfgetBackFirst(param).then((res) => {
        if (res.success) {
          this.sendInfo = res.info;
          this.wfName = this.sendInfo.wfName;
          this.titleinfo = this.sendInfo.wfName;
          this.fromNodesync = this.sendInfo.fromNode.sync;
          this.edge = this.sendInfo.edge;
          this.node = this.sendInfo.node;
          //路由通过率
          this.routePercent = this.sendInfo.fromNode.routePercent;
          if (this.routePercent) {
            this.isPass = true;
            this.edge.forEach(element => {
              this.$set(element, 'selected', false);
            });
          } else {
            this.isPass = false;
          }
          this.initNOde();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    wfbackTo() {
      this.$set(this.sendInfo, "content", this.content); //流程内容
      wfbackTo(this.sendInfo).then((res) => {
        if (res.success) {
          this.ok();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    checkSubmit: function (edge, nodes) {
      //校验路由 人员选择是否规范
      var result = false;
      var runtypes = [0, 1, 2, 3];
      var hasRuntype = false;
      var hasUser = true;
      var edgesinfo = "";
      var userinfo = "";
      var hasword = true;

      for (var i = 0; i < nodes.length; i++) {
        //循环选中的路由，判断是否存在 路由runtype 为 0，1，2，3 的其中一种
        if (runtypes.indexOf(nodes[i].runType) > -1) {
          hasRuntype = true;
        }

        if (nodes[i].runType == 2 || nodes[i].runType == 0) {
          //如果选中路由的runtype 为0 或者2 必须选中一个用户
          if (nodes[i].user.length == 0) {
            hasUser = false;
            userinfo = userinfo + "、 " + nodes[i].name;
          }
        }
      }
      if (this.sendInfo.mustWord) {
        //如果流转信息是必填， 就要判断流转信息是否为空
        if (this.sendInfo.word == "" || this.sendInfo.word == null) {
          hasword = false;
        }
      }
      //路由、用户、留言信息 不符合就弹出消息框提示并返回false
      if (!hasRuntype) {
        for (var i = 0; i < this.node.length; i++) {
          if (runtypes.indexOf(this.node[i].runType) > -1) {
            edgesinfo = edgesinfo + "、 " + this.node[i].name;
          }
        }
        this.message(
          "路由选择提示",
          edgesinfo.substring(2) + "  等路由必须选择一条",
          2
        );
      } else {
        if (!hasUser) {
          this.message(
            "用户选择提示",
            userinfo.substring(2) + "  节点必须选择一个用户",
            2
          );
        } else {
          if (!hasword) {
            this.message("留言信息提示", "留言信息不能为空！", 2);
          }
        }
      }

      result = hasUser && hasRuntype && hasword;
      return result;
    },
    sendflow() {
      if (this.isPass) {
        this.$message('选择的路由通过率小于' + this.routePercent, 3);
        return
      }
      var edge = deepCopy(this.edge);
      var nodes = deepCopy(this.node);
      for (var j = edge.length - 1; j > -1; j--) {
        //删除没有打钩的路由
        if (!edge[j].selected) {
          edge.splice(j, 1);
          nodes.splice(j, 1);
        }
      }

      for (var i = 0; i < nodes.length; i++) {
        //删除节点下没有打钩的用户
        var user = [];
        for (var j = 0; j < nodes[i].user.length; j++) {
          if (nodes[i].user[j].selected == true) {
            user.push(nodes[i].user[j]);
          }
        }
        nodes[i].user = user;
      }
      var sendInfo = this.sendInfo;
      sendInfo.edge = edge; //绑定新的路由
      sendInfo.node = nodes; //绑定新节点
      if (this.checkSubmit(edge, nodes)) {
        this.flowSend();
      }
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}

.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}

.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.dialog-body {
  color: var(--page-lable-text-color);
}

.btndiv {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  margin-left: 5px;
  line-height: 22px;
  width: 68px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: var(--button-back-color);
}

.btndiv:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndiv:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

/*每行的标签高度设为32px*/
>>>.el-form-item__label {
  line-height: 32px;
}

/*设置el-form-item的高度*/
>>>.el-form-item__content {
  height: 32px;
  line-height: 32px;
}

/*数字输入框的上箭头行高*/
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
  line-height: 16px !important;
}

/*数字输入样式*/
>>>.el-input-number {
  line-height: 32px;
  width: 100%;
}

/*element 输入框样式*/
>>>.el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*element 下拉框*/

>>>.el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}

/*下拉框箭头*/

>>>.el-select__caret {
  line-height: 32px;
}

/*el-form-item 每行离底部多元*/
>>>.el-form-item {
  margin-bottom: 10px;
}

/*tabs 样式*/
>>>.el-tabs__header {
  margin: 0;
}

.el-tabs {
  height: 100%;
}

>>>.el-tabs__active-bar {
  width: 70px !important;
  left: -5px;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}

>>>.el-tabs__item {
  padding: 0 10px;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
}

/*活动颜色*/
>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
>>>.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: var(--page-back-color);
}

/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel>>>.el-form-item__content {
  margin-left: 0 !important;
  text-align: left;
}

.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/*element 输入框的 focus hover样式*/
>>>.el-input__inner:focus,
>>>.el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>>.el-input__inner:hover,
>>>.el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}

>>>.el-form-item__label,
>>>.el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.edge-div,
.user-div {
  width: 100%;
  height: 350px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background: var(--page-back-color);
  overflow: auto;
}

.edge-div {
  width: calc(100% - 17px);
}

.tb-head {
  background: var(--table-head-back-color);
  color: var(--table-head-text-color);
  height: 32px;
  line-height: 32px;
}

.tb-head>>>.el-col-2,
.tb-td>>>.el-col-2 {
  text-align: center;
  height: 32px;
}

.tb-td {
  color: var(--table-text-color);
  height: 32px;
  line-height: 32px;
}

.tb-td-odd {
  background: var(--table-row-odd-back-color);
}

.tb-td:hover {
  background: var(--button-hover-back-color);
  color: var(--table-head-text-color);
  cursor: pointer;
}

.tb-td-active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.tb-edge {
  padding-left: 9px;
}

>>>.el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*部门显示不下...*/
>>>.el-col-14 {
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
